// out: ../css/shop.css
body {
    background-color: #f5f5f5;
}

.wrapper {
    width: 80%;
    margin: 0 auto;
}

header {
    font-size: 12px;

    .little {
        .wrapper {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            line-height: 40px;
        }

        background-color: #333333;
        height: 40px;


        ul {
            width: 70%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;

            li {
                a {
                    border-right: 1px solid #424242;
                    ;
                    padding-right: 8px;
                }

                &:nth-child(13) a {
                    border-right: 0px solid rgb(211, 13, 19);
                }
            }
        }

        span {
            display: inline-block;
        }

        .user a::after {
            font-size: 16px;
            font-family: iconfont;
            content: "\e7b2";
        }

        .cart {
            a::before {
                font-size: 16px;
                font-family: iconfont;
                content: '\e698';
            }
        }





    }

    .nav {
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .logo {
            width: 50px;
            height: 50px;
            background: url('../images/logo-mi2.png');
            background-size: 100%;
        }

        ul {
            display: flex;
            justify-content: space-between;

            li {
                font-size: 16px;
                margin: 0 15px;

                &:first-child {
                    margin-left: 100px;
                }

                &:last-child {
                    margin-right: 70px;
                }
            }
        }

        .search {
            font-size: 0px;

            input {
                vertical-align: middle;
                width: 185px;
                height: 45px;
                border: 1px solid black;
                padding-left: 20px;
            }

            button {
                vertical-align: middle;
                height: 45px;
                width: 50px;
                background-color: rgba(0, 0, 0, 0);
                border: 1px solid black;
                border-left: 0px;

                span {
                    font-size: 35px;
                }
            }
        }
    }
}

.box {
    .banner {
        overflow: hidden;
        position: relative;
        height: 460px;

        .ban-nav ul {
            height: 460px;
            width: 234px;
            background-color: rgba(105, 101, 101, .6);
            ;

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            padding: 30px 30px;

            font-size: 16px;
            color: white;

            li {
                cursor: pointer;

                span {
                    float: right;
                }

                &:hover {
                    color: orange;
                }
            }

        }

        .ban-img {
            display: inline-block;
            width: 994.8px;
            position: absolute;
            right: 0px;
            top: 0px;
        }
    }

}

footer {
    .set-footer {
        height: 470px;
        background-color: white;

        .footer-nav {
            padding-top: 40px;

            ul{
                display: flex;
                justify-content: space-between;
                font-size: 17px;
                padding-bottom: 40px;
                color: #b0b0b0;
                border-bottom: 1px solid #b0b0b0;

                li{

                    &:nth-child(2n){
                        font-size: 20px;
                        font-weight: 200;
                    }

                    a{
                        &:hover{
                            color: orange;
                            text-decoration: none;
                        }
                    }
                }
            }
        }
    }
}